<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <title>全部党员信息</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="../layui/css/layui.css" media="all">
<link href="favicon.ico" rel="shortcut icon">
</head>
<script src="../../layui/layui.js" charset="utf-8"></script>
<style>
	#first{
		text-align: center;
		font-size: 22px;
		height:40px;
		background-color: #A8A8A8
	}
</style>
<body>

<div id="first">
  党员信息
</div>


<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中党员的行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">选中党员的个数</button>
</div>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-danger" lay-event="payment">缴费</a>
</script>
          
<script>
layui.use(['table','form'], function(){
  var table = layui.table;
  var form = layui.form;
  table.render({
    elem: '#test'
    ,url:'list'
    ,cellMinWidth: 80
    ,height: 'full-20'
    ,defaultToolbar: ['exports','filter']
    ,toolbar:'#toolbarDemo'
    ,title: '用户数据表'
    ,cols: [
    	[
      {type: 'checkbox',width:100,fixed: 'left'}
      ,{field:'partyPaymentId', title:'ID', fixed: true,unresize: true, sort: true}
      ,{field:'pname', title:'用户名'}
      ,{field:'amountPayable', title:'应缴纳党费'}
      ,{field:'payAmount', title:'实际缴纳党费'}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
    ]
    	]
  	,id:'testReload'
    ,page: true
  });
  
  var $ = layui.$, active = {
		    reload: function(){
		      var demoReload = $('#demo');
		      //执行重载
		      table.reload('testReload', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		          key: {
		        	  id: demoReload.val()
		          }
		        }
		      });
		    }
		  };
  
  $('.demo .layui-btn').on('click', function(){
	    var type = $(this).data('type');
	    active[type] ? active[type].call(this) : '';
	  });
  
  
  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(JSON.stringify(data));
      break;
      case 'getCheckLength':
        var data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
      break;
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选');
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'edit'){
    	form.val("formTest", data);
    	layer.open({
    		type:1,
			title:'修改用户',
			area:'800px',
			anim: 1,
			skin: 'layui-layer-molv',
			content:layui.$('#edit'),	
    	}); 
    } else if(obj.event === 'payment'){
		form.val("formTest", data);
    	
    	layer.open({
    		type:1,
			title:'缴费信息',
			area:'800px',
			anim: 1,
			skin: 'layui-layer-molv',
			content:layui.$('#payment'),	
    	});
    }
  });
});
</script>
<form id="edit" class="layui-form layui-form-pane" action="update" lay-filter="formTest" method="post" hidden="true" style="height:600px;">
 	<div>
	 	<label class="layui-form-label">用户id</label>
	    <div class="layui-input-block">
	      <input type="text" name="partyPaymentId" lay-verify="title" autocomplete="off" class="layui-input">
	    </div>
    </div>
    <div>
	    <label class="layui-form-label">用户名</label>
	    <div class="layui-input-block">
	      <input type="text" name="pname" lay-verify="title" autocomplete="off" class="layui-input">
	    </div>
  	</div>
  	<div class="layui-form-item">
	    <label class="layui-form-label">应缴纳党费</label>
	    <div class="layui-input-block">
	      <input type="text" name="amountPayable" autocomplete="off" class="layui-input">
	    </div>
  	</div>
  	<div class="layui-form-item">
	    <label class="layui-form-label">实际缴纳党费</label>
	    <div class="layui-input-block">
	      <input type="text" name="payAmount" autocomplete="off" class="layui-input">
	    </div>
  	</div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<form id="payment" class="layui-form layui-form-pane" action="#" lay-filter="formTest" method="post" hidden="true" style="height:400px;">
 	<div>
	 	<label class="layui-form-label">用户id</label>
	    <div class="layui-input-block">
	      <input type="text" name="partyPaymentId" lay-verify="title" autocomplete="off" class="layui-input">
	    </div>
    </div>
    <div>
	    <label class="layui-form-label">缴费金额</label>
	    <div class="layui-input-block">
	      <input type="text" name="amountPayable" lay-verify="title" autocomplete="off" class="layui-input">
	    </div>
  	</div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">确定缴费</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</body>
</html>